<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<html>
<style>
#main {
	width: 800px;
	margin: auto;
	position: relative;
}
#changelog,
#downloadHistory {
	margin-left: 20px;
}
</style>
<body>
	<div id="main">
		<jsp:include page="banner.jsp">
			<jsp:param name="page" value="home" />
		</jsp:include>
		<button style="display:inline-block;font-family:monospace;" onclick="fold(this, 'changelog');">-</button><h3 style="display:inline-block;">已收藏课程的最近更新</h3>
		<div id="changelog"></div>
		<br>
		<button style="display:inline-block;font-family:monospace;" onclick="fold(this, 'downloadHistory');">-</button><h3 style="display:inline-block;">最近下载过的课件</h3>
		<div id="downloadHistory"></div>
	</div>
</body>
<script>
var flag = {
	'changelog' : true,
	'downloadHistory' : true
};

function fold(btn, id){
	flag[id] = !flag[id];
	document.getElementById(id).style.display = flag[id] ? 'block' : 'none';
	btn.innerHTML = flag[id] ? '-' : '+';
}

function calculateTimeDiff(time){
	var now = new Date(),
		then = new Date(time);
	
	var day = now.getDate() - then.getDate();
	
	if (day != 0) {
		return day + '天  前';
	}
	
	var hour = now.getHours() - then.getHours();
	
	if (hour != 0) {
		return hour + '小时前';
	}
	
	var min = now.getMinutes() - then.getMinutes();
	
	if (min != 0) {
		return min + '分钟前';
	}
	
	var seconds = now.getSeconds() - then.getSeconds();
	
	return seconds + '秒  前';
}

function renderChangelog(data){
	var div = document.getElementById('changelog'),
		html = '', currentCourseID='';
	
	for (var i = 0; i<data.length; i++){
		if (data[i].courseID != currentCourseID){
			currentCourseID = data[i].courseID;
			html += '<h4><a href="coursedetails.jsp?courseID=' + currentCourseID + '&name=' + data[i].courseName + '" >' + data[i].courseName + '</a></h4>';
		}
		
		html += '<div style="margin-left:5px;"><span style="color: gray;">' + calculateTimeDiff(data[i].changeTime) + '&nbsp;&nbsp;&nbsp;</span><span>' + data[i].log +'</span></div>';
	}
	if (data.length == 0){
		html = '暂无记录';
	}
	
	div.innerHTML = html;
}

function renderHistory(data) {
	var div = document.getElementById('downloadHistory'),
		html = '';
	
	for (var i = 0; i<data.length; i++){
		html += '<div><span style="color: gray;">' + calculateTimeDiff(data[i].downloadTime) + '&nbsp;&nbsp;&nbsp;</span>' + 
				'下载了&nbsp;&nbsp;<a href="coursedetails.jsp?courseID=' + data[i].courseID + '&name=' + data[i].courseName + '" >' + data[i].courseName + '</a>&nbsp;课程的&nbsp;&nbsp;&nbsp;' + 
				'<span style="font-weight:800">' + data[i].slideName + '</span>&nbsp;课件</div>';
	}
	
	if (data.length == 0){
		html = '暂无记录';
	}
	
	div.innerHTML = html;
}

function loadData(){
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "servlet/Home", false);
	xhr.send(null);
	var data = eval('(' + xhr.responseText + ')'),
		changelog = data.changelog,
		history = data.downloadHistory;
	
	renderChangelog(changelog);
	renderHistory(history);
}

window.onload = function(){
	loadData();
}
</script>
</html>